<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        body {
            background: url(image/1.jpg) no-repeat;
            background-size:100%
        }
        .box {
            height: 165px;
            padding-top: 35px;
            text-align: center;
            background: rgba(255,255,255,0.3);
        }
        img {
            cursor: pointer;
            margin: 0 10px;
        }
    </style>
</head>
<body>
<div class="box" id="box">
    <img src="image/1.jpg" alt="" width="200px"/>
    <img src="image/2.jpg" alt="" width="200px"/>
    <img src="image/3.jpg" alt="" width="200px"/>
    <img src="image/4.jpg" alt="" width="200px"/>
    <img src="image/5.jpg" alt="" width="200px"/>
</div>
<script src="tools.js"></script>
<script>
    var box = getEleById('box');
    var body = document.body;
    var imag = box.children;
    console.log(imag);
    for(var i = 0;i<imag.length;i++){
        imag[i].onclick=function () {
            body.style.backgroundImage = "url("+this.src+")";
        }


    }
</script>
</body>
</html>